<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .header,
        .footer {
            width: 1200px;
            margin: 0 auto;
            background-color: skyblue;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
            height: 120px;
            color: #fff;
        }

        .footer {
            height: 300px;
        }

        ul,
        li {
            list-style: none;
        }

        ul {
            width: 1200px;
            display: flex;
            flex-wrap: wrap;
            margin: 0 auto;
            justify-content: space-between;
            padding-top: 10px;
        }

        li {
            width: 290px;
            border: 1px solid #333;
            margin-bottom: 10px;
            padding: 5px;
            box-sizing: border-box;
        }

        li>img {
            width: 278px;
            height: 300px;
            display: block;
        }

        .pagination {
            width: 1200px;
            margin: 10px auto;
            height: 50px;
            display: flex;
            align-items: center;
        }

        .pagination>.prev,
        .pagination>.next {
            width: 50px;
            height: 30px;
            cursor: pointer;
            background-color: orange;
            font-size: 24px;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .pagination>.disable {
            cursor: not-allowed;
            background-color: #ccc;
        }

        .pagination>.total {
            font-size: 30px;
            font-weight: 700;
            margin: 0 20px;
        }

        .pagination>select {
            font-size: 22px;
            padding-left: 20px;
            margin-left: 30px;
        }
    </style>
    <script src="./data.js"></script>
</head>

<body>

    <div class="header">网页头部</div>
    <div class="pagination">
        <span class="prev disable">&lt;</span>
        <span class="total">1 / 100</span>
        <span class="next disable">&gt;</span>
        <select>
            <option value="4">4</option>
            <option value="8">8</option>
            <option value="12">12</option>
            <option value="16">16</option>
        </select>
    </div>
    <ul>

    </ul>
    <div class="footer">网页底部</div>
    <script>

        //
        //   var res_data = newarr.reduce(function(prev,item){
        //       return prev + `
        //       <li>
        //         <a href="${item['detail_url']}"><img src="${item['pic_url']}" alt="" width="278" height="278"></a>
        //         <p>${item['title']}</p>
        //         <p>价格:${item['price']}</p>
        //         <p>销量:${item['sales']}</p>
        //         <p>店名:${item['seller_nick']}</p>
        //         <p>更新时间:${item['data_update']}</p>
        //       </li>  
        //       `
        //   },'');

        //   // console.log(res_data);

        //   document.querySelector('ul').innerHTML = res_data;
        // 上一页 

        // 下一页 

        // 当前第几页  

        // 总共有几页  = 总条数 / 每页显示多少条  

        // 每页显示多少条 


        // 打开页面   
        // 默认第一页 加载第一页的数据 
        // 每页多少条  程序员决定  
        // 如果第一页 没有上一页   有下一页 
        // 当前页码显示为1  总页数  = 总条数 / 每页显示多少条 
        // 有下一页  

        //如果用户点击下一页  
        // 当前页码跟着改变  下一页的数据 
        // 如果页码等于总页数  到底了 没有下一页了 有上一页 

        //如果用户点击上一页  
        // 当前页码跟着改变  加载上一页的数据 
        // 如果到第一页 上一页不能点击了 


        // 用户点击每页显示的条数
        // 重新显示第一页的数据 
        // 当前页跟着改变 总页码页跟着改变  


        // 如果程序员决定每页显示16条 
        // 那么下拉框 16被选中 


        //上面都在做一个重复的动作  那就是加载第几页的数据 显示在页面上 
        // 同时按钮  显示区域也跟着变  

        //总共40条 
        //程序员决定 每页显示8条 
        // 总共5页 
        //第几页  每一页数据的范围     每页条数
        // 1      0~7                  8
        // 2      8~15                 8
        // 3      16~23                8
        // 4      24~31                8
        // 5       32~39               8

        //   (第几页-1)*每页的条数~(第几页*每页条数)-1
        //原来 遍历整个数据(数组)把数组的每一项都拼接起来然后放到ul中 
        // 我现在就是把第几页的数据从总数据提取出来放到放到一个小数组中 
        // 遍历这个小数组  然后拼接成一个大字符串 然后放到ul
        
        //获取元素  

        var totalEle = document.querySelector('.total');
        var current = 5; //当前页  默认1 
        var pagesize = 8; //每一页的条数   默认8条
        //上一页的按钮
        var prevbtn = document.querySelector('.prev');
        // 下一页的按钮
        var nextbtn = document.querySelector('.next');

        // 下拉框
        var selectbtn = document.querySelector('select');
        // alert(typeof selectbtn.value);表单的value都是string 
        var totalpage;
        function bindHTML() {
            // slice左闭右开 我们需要取到 (第几页*每页条数)-1 所以写的时候 不减一
            var bind_page = newarr.slice((current - 1) * pagesize, (current * pagesize));
            // console.log(bind_page)
            var res_data = bind_page.reduce(function (prev, item) {
                return prev + `
          <li>
            <a href="${item['detail_url']}"><img src="${item['pic_url']}" alt="" width="278" height="278"></a>
            <p>${item['title']}</p>
            <p>价格:${item['price']}</p>
            <p>销量:${item['sales']}</p>
            <p>店名:${item['seller_nick']}</p>
            <p>更新时间:${item['data_update']}</p>
          </li>  
          `
            }, '');

            document.querySelector('ul').innerHTML = res_data;
            totalpage = Math.ceil(newarr.length / pagesize);
            totalEle.innerHTML = `${current} / ${totalpage}`;
            // 如果当前页码为1 那么没有上一页
           prevbtn.className =  current == 1?'prev disable':'prev';

            // 当前页码为总页数  那么没有下一页
            nextbtn.className =current == totalpage?'next disable':'next'
            
            selectbtn.value = pagesize;

        }
        
        bindHTML();

        //点击上一页 页码 --
        prevbtn.onclick = function(){
            if(current == 1) return; //防止越界 最小页码是1
            current--;
            bindHTML(); //页码发生改变 需要重新加载数据并渲染
        }

        // 点击下一页  页码++
        nextbtn.onclick = function(){
            if(current == totalpage) return; //防止越界 最小页码是1
            current++;//页码发生改变 需要重新加载数据并渲染
            bindHTML();
        }

        // 选择下拉框 
        // 重新从第一页开始加载数据 
        selectbtn.onchange = function(){
            // 当表单的内容发生了改变  就会执行function方法
            //pagesize的数据类型是数值 表单的value是字符串 
            pagesize = selectbtn.value - 0;
            current = 1;
            bindHTML()
        }




    </script>
</body>

</html>